<!-- 支付方式组件 -->
<template>
	<!-- 选择支付方式 -->
	<u-popup :show="show" :round="10" bgColor="transparent" mode="bottom" @close="close2">

		<view class="content">
			<view class="content-item" v-for="res in list" @click="switchSelect(res)">
				<view class="content-item-box">
					<image class="image" :src="res.url" mode="aspectFill"></image>
					<text class="text">{{res.name}}</text>
				</view>
				<view :class="{
						'selectBox':!res.status
					}">
					<image v-if="res.status" class="select" src="/static/images/select.png" mode="aspectFill"></image>
				</view>
			</view>

		</view>

		<view class="button" @click="typeShowSubmit">
			确定
		</view>

	</u-popup>
</template>

<script>
	export default {
		name: 'payMode',
		props: {
			// 是否显示
			show: {
				type: Boolean,
				default: false
			},

			//关闭弹窗
			close: {
				type: Function,
				default: () => {}
			},

			//传递切换值
			submit: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				list: [{
						name: '微信',
						value: 2,//支付方式：0-余额；1-微信公众号，2-微信小程序
						url: '/static/images/WX.png',
						status: true
					},
					{
						name: '余额',
						value: 0,
						url: '/static/images/balancePay.png',
						status: false
					},
				]
			};
		},
		methods: {
			/**
			 * 关闭弹窗
			 */
			close2() {
				this.$emit('close')
			},

			/**
			 * 切换选项
			 */
			switchSelect(val) {
				this.list.forEach((res, index) => {
					if (res.name === val.name) {
						this.list[index].status = true

					} else {
						this.list[index].status = false
					}

				})
			},

			/**
			 * 选择支付方式后的方法
			 */
			async typeShowSubmit(e) {

				// 遍历值,传递确定值
				this.list.map(res => {
					if (res.status) {
						this.$emit('submit', res.value)
					}
				})

				// 关闭弹窗
				this.close2()
			},
		}
	}
</script>

<style lang="less" scoped>
	// 支付弹出框相关
	.content {
		#padding(24rpx 12rpx);
		#flex(-, start, center);
		#box(auto, 176rpx, 40rpx, #fff);

		margin: 32rpx 30rpx;

		.content-item {
			#flex(-, space-between, center);
			#padding(0 48rpx);
			width: 50%;

			.content-item-box {
				#flex(-, start, center);

				.image {
					#box(40rpx, 40rpx);
					margin-right: 20rpx;
				}

				.text {
					#font(28rpx, #0f0d21);
				}
			}

			.selectBox {
				#box(36rpx, 36rpx, 50%, #fff, 2rpx solid #d6d5d5);
			}

			.select {
				#box(36rpx, 36rpx, 50%);
				#flex(-, center, center);
			}




			&:not(:last-child) {
				border-right: 2rpx solid #D9D9D9;
			}
		}
	}

	.button {
		margin: 0 30rpx 32rpx 30rpx;
		#box(auto, 88rpx, 44rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
		#flex(-, center, center);
		#font(36rpx, #fdf3f3);
	}
</style>